<!--
 * @Author: your name
 * @Date: 2020-02-25 13:32:39
 * @LastEditTime: 2020-03-19 13:47:30
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \福路德扫码系统\html\cksm.html
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0,viewport-fit=cover" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <link rel="stylesheet" type="text/css" href="../css/local.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <script type="text/javascript" src="../script/app-tree.js"></script>
    <style type="text/css">
        .bottom {
            padding: 8px 15px;
        }

        .starMark {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box">
            <van-nav-bar-main title="5S评审清单" left-arrow @click-left="onClickLeft">
            </van-nav-bar-main>

            <div class="content">
                <van-tree-select :active-id.sync="activeId" :main-active-index.sync="activeIndex" :items="itemsOf5S"
                    height="580" @click-nav="changeSort">
                    <template #content>
                        <van-cell v-for="item in curSelectSort" :key="item.index" @click="changeSelItem(item)">
                            <van-row type="flex" align="center">
                                <van-col span="3">
                                    <van-tag color="#00aaff" round>{{item.score}}</van-tag>
                                </van-col>
                                <van-col span="18">{{item.text}}</van-col>
                                <van-col span="3">
                                    <div class="starMark">
                                        <van-icon name="star" size="16" color="#FF0000" v-if="item.IsSerious">
                                        </van-icon>
                                    </div>
                                </van-col>
                            </van-row>
                        </van-cell>
                    </template>
                </van-tree-select>
            </div>

            <div class="bottom">
                <div class="left-content">
                    <div class="total">
                        累计扣分:<span>{{totalScore}}</span>
                    </div>
                </div>
                <div class="right-content">

                </div>
            </div>
        </div>

    </div>
</body>
<script type="text/javascript">
    var vm;
    apiready = function () {
        api.addEventListener({
            name: 'refreshFSDe'
        }, function (ret) {
            vm.totalScore = 0;
            // vm.curSelectSort = [];
            vm.getPageData();
        })

        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                id: api.pageParam.id || 0,  //5S检查主表ID
                activeId: 0, //右边选中项目ID
                activeIndex: 0,  //左侧索引
                curSelectSort: [],   //当前所选分类
                formData: {},
                formDetail: [],
                itemsOf5S: [],   //评审清单
                totalScore: 0,   //扣分合计
            },
            created: function () {
                var that = this;
                if (that.id) {
                    that.getPageData();
                }
            },
            methods: {
                //获取5S评审明细
                getPageData() {
                    var that = this;
                    APP.ajax('5S_GetDailyDetail', { DailyFSID: that.id }, function (res) {
                        vm.formData = res.ds[0];
                        vm.formDetail = res.ds1;

                        var tmp = [];
                        for (var i in res.ds1) {
                            var x = 0;
                            for (var j in tmp) {
                                if (res.ds1[i].ItemTypeID == tmp[j].ItemTypeID) {
                                    var x = 1;
                                    tmp[j].children.push({ text: res.ds1[i].itemName, id: res.ds1[i].DailyFSDeID, score: res.ds1[i].Score, IsSerious: res.ds1[i].IsSerious })
                                    if (res.ds1[i].Score) {
                                        if (tmp[j].badge == '') {
                                            tmp[j].badge = res.ds1[i].Score
                                        } else {
                                            tmp[j].badge += res.ds1[i].Score;
                                        }
                                    }
                                }
                            }

                            if (x == 0) {
                                tmp.push({
                                    text: res.ds1[i].ItemTypeName,
                                    ItemTypeID: res.ds1[i].ItemTypeID,
                                    badge: res.ds1[i].Score ? res.ds1[i].Score : '',
                                    children: [
                                        { text: res.ds1[i].itemName, id: res.ds1[i].DailyFSDeID, score: res.ds1[i].Score, IsSerious: res.ds1[i].IsSerious }
                                    ]
                                })
                            }
                            if (res.ds1[i].Score) {
                                vm.totalScore += parseInt(res.ds1[i].Score);
                            }
                        }
                        vm.itemsOf5S = tmp;
                        vm.curSelectSort = vm.itemsOf5S[vm.activeIndex].children;
                    })
                },
                changeSort(index) {
                    vm.activeIndex = index;
                    vm.curSelectSort = vm.itemsOf5S[index].children;
                },
                changeSelItem(data) {
                    vm.activeId = data.id;
                    api.openWin({
                        name: '5SNQInfo',
                        url: '5SNQInfo.html',
                        reload: true,
                        slidBackEnabled: false,
                        allowEdit: true,
                        pageParam: {
                            id: vm.activeId,
                            IsSerious: data.IsSerious
                        }
                    })
                },
                onClickLeft: function () {
                    api.sendEvent({
                        name: 'refreshList'
                    })
                    api.closeWin();
                }
            }
        })
    };
</script>

</html>